<template>
    <div class="trend">
        <div class="text" :style="{color: textColor}">
            <slot name="text" v-if="slots.text"></slot>
            <div v-else>{{ text }}</div>
        </div>
        <div class="icon">
            <component :is="`el-icon-${toLine(upIcon)}`" v-if="mode === 'up'" :style="{color: upIconColor}" ></component>
            <component :is="`el-icon-${toLine(downIcon)}`" :style="{color: downIconColor}" v-else ></component>
        </div>
    </div>
</template>

<script setup lang="ts">
import { toLine } from '../../utils/index'
let props = defineProps({
    mode: {
        type: String,
        default: 'up'
    },
    text: {
        type: String,
        default: ''
    },
    upIconColor: {
        type: String,
        default: '#E84133'
    },
    downIconColor: {
        type: String,
        default: '#239242'
    },
    upTextColor: {
      type: String,
      default: 'rgb(0,0,0)'
    },
    downTextColor: {
      type: String,
      default: 'rgb(0,0,0)'
    },
    upIcon: {
      type: String,
      default: 'ArrowUp'
    },
    downIcon: {
      type: String,
      default: 'ArrowDown'
    },
})
let slots = useSlots()
console.log(slots);

let textColor = computed(() => {
  return props.mode === 'up' ? props.upTextColor : props.downTextColor
})
</script>

<style scoped lang="scss">
.trend {
    display: flex;
    align-items: center;
    .text{
        font-size: 14px;
        margin-right: 6px;
    }
    svg{
        width: .8rem;
        height: .8rem;
    }
}
</style>
